<template>
  <div class="container-item-list-cart">
    <div v-for="(temp,index) in 10" :key="index" class="group-product-list">
      <van-checkbox v-model="checked" checked-color="#D63A54" />
      <van-image class="item-cover" src="http://placehold.it/80x80" width="80" height="80" radius="5" filt="cover" />
      <div class="group-product-info">
        <div class="item-name">庆阳红富士1.5kg</div>
        <div class="item-type">已选：1.5kg，礼盒装</div>
        <van-stepper v-model="value" />
      </div>
      <div class="item-price-total">￥39.9</div>
      <img class="item-btn-del" src="@/assets/delete.png" @click="deleteHandler">
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      checked: true,
      value: 1
    }
  },
  methods: {
    async deleteHandler() {
      Toast('已删除')
    }
  }
}
</script>

<style lang="less">
.container-item-list-cart {
  background: #f5f6f8;
  .group {
    &-product-list {
      margin-bottom: 10px;
      padding: 10px;
      display: flex;
      align-items: center;
      position: relative;
      background: #fff;
    }
    &-product-info {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .item {
    &-cover {
      margin: 0 10px;
    }
    &-type {
      font-size: 14px;
      color: #999;
    }
    &-price-total {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #d63a54;
    }
    &-btn-del {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }
}
</style>
